function parcicles() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    this._w = w;
    this._h = h;
    this.pSize = 50;
    this.l =[-30,0,30,60,90,120,150];
    this.t =[500,480,460,440,420,400,380]
    var r = Math.random() * 255 >> 0,
        g = Math.random() * 255 >> 0,
        b = Math.random() * 255 >> 0,
        a = Math.floor(Math.random() * 10);
    this.lineColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
   
}

parcicles.prototype = {
    emptyArray: [],
    length: 10,
    stars : [],
    num:90,
    created: function () {
        for (var i = 0; i < this.length; i++) {
            this.emptyArray.push(new parcicles());
        }
        for (var i = 0; i < this.num; i++) {
            var aStar = {
                // x轴坐标
                x: Math.round(Math.random() * this._w),
                // y轴坐标
                y: Math.round(Math.random() * this._h/1.5),
                // 圆半径
                r: Math.random() * 3,
                ra: Math.random() * 0.5,
                // 透明度
                alpha: Math.random()+0.5,
                // 横向移动偏移量
                vx: Math.random() * 0.2 - 0.1,
                // 纵向移动偏移量
                vy: Math.random() * 0.2 - 0.1
            };
            this.stars.push(aStar);
            
            
        }
        // console.log(this.stars)
    },
    createCanvas: function () {
        this.c1 = document.getElementById("can1");
        this.ctx1 = this.c1.getContext('2d');
        this.c1.width = this._w;
        this.c1.height = this._h;

        this.c2 = document.getElementById("can2");
        this.ctx2 = this.c2.getContext('2d');
        this.c2.width = this._w;
        this.c2.height = this._h;

        this.c3 = document.getElementById("can3");
        this.ctx3 = this.c3.getContext('2d');
        this.c3.width = this._w;
        this.c3.height = this._h;
        
    },
    draw: function () {
        this.ctx2.clearRect(0, 0, this._w, this._h) 
        for (var j = 0; j < this.stars.length; j++) {
           
            var star = this.stars[j];
            //  console.log(typeof(star))
            
            star.alpha += star.ra
            // 透明度判断，从0到1
            if (star.alpha <= 0) {
                star.alpha = 0;
                star.ra = -star.ra;
                star.vx = Math.random() * 0.2 - 0.1;
                star.vy = Math.random() * 0.2 - 0.1;
            } else if (star.alpha > 1) {
                star.alpha = 1;
                star.ra = -star.ra
            }
            star.x += star.vx;
            // x轴坐标判断
            if (star.x >= this._w) {
                star.x = 0;
            } else if (star.x < 0) {
                star.x = this._w;
                star.vx = Math.random() * 0.2 - 0.1;
                star.vy = Math.random() * 0.2 - 0.1;
            }
            star.y += star.vy;
            // y轴坐标判断
            if (star.y >= this._h/1.5) {
                star.y = 0;
                star.vy = Math.random() * 0.2 - 0.1;
                star.vx = Math.random() * 0.2 - 0.1;
            } else if (star.y < 0) {
                star.y = this._h;
            }
            // 开始绘制
            this.ctx2.beginPath();
            var bg = this.ctx2.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
            bg.addColorStop(0, 'rgba(255,255,255,' + star.alpha + ')');
            bg.addColorStop(1, 'rgba(255,255,255,0)');
            this.ctx2.fillStyle = bg;
            // 画圆
            this.ctx2.arc(star.x, star.y, star.r, 0, Math.PI * 2, true);
            // 实际绘制
            this.ctx2.fill();
            this.ctx2.closePath();
        }
    },
    rect:function(){
        for (var j = 0; j < this.length; j++) {
            this.ctx3.beginPath();
            
            this.ctx3.fillStyle = this.emptyArray[j].lineColor;
            this.ctx3.save()
            this.ctx3.transform(1.2,0,0.2,1,1,0)
            // while(j<7){
            //     this.ctx3.fillRect(this.emptyArray[j].l[j],this.emptyArray[j].t[j], this.emptyArray[j].pSize,this.emptyArray[j].pSize);
            // }
            this.ctx3.fillRect(this.emptyArray[j].l[j],this.emptyArray[j].t[j], this.emptyArray[j].pSize,this.emptyArray[j].pSize);
            this.ctx3.restore()
        }
    },
    move: function () {
        this.draw();
        setInterval(this.draw.bind(this),600)
        // requestAnimaFrame(this.rect.bind(this));
    },
    init: function () {
        this.created();
        this.createCanvas();
        this.draw();
        this.rect();
        this.move();
    }
}
var requestAnimaFrame = function (callback) {
    return window.requestAnimationFrame(callback) ||
        window.webkitRequestAnimationFrame(callback) ||
        window.mozRequestAnimationFrame(callback) ||
        window.oRequestAnimationFrame(callback) ||
        window.msRequestAnimationFrame(callback) ||
        function (callback) {
            setInterval(callback, 1000 / 60);
        }
};
function render() {
        
        
    }
var p = new parcicles();
p.init();